<template>
  <div
    :class="['project-card', canView ? 'cursor-pointer' : '']"
    @click="canView && router.push({ path: `/project/detail`, query: { id: info.id } })"
  >
    <div class="flex justify-between">
      <div
        class="grid h-20 w-32 place-content-center b-rd-14 font-size-12 color-#FFF font-bold"
        :class="[info.projectLevel ? '' : 'opacity-0']"
        :style="{ background: levelColor }"
      >
        {{ info?.projectLevel?.at(-1) }}
      </div>
      <div class="flex items-center gap-x-4">
        <div class="h-20 bg-#F4F5F7 p-x-7 font-size-12 color-#3A3E45 font-bold lh-20">
          V.{{ info.projectVersion || 0 }}.{{ info.projectVersionMinor || 0 }}
        </div>
        <n-tooltip
          v-if="info.projectPhase === 'TO_BE_STARTED' && hasPermission('project_delete')"
          trigger="hover"
        >
          <template #trigger>
            <n-icon
              :size="20"
              :component="MdMore"
              class="rounded-2 bg-#F4F5F7"
              color="#000"
            ></n-icon>
          </template>
          <n-button text color="#FFF" @click.stop="emits('del', info)">删除</n-button>
        </n-tooltip>
      </div>
    </div>
    <div class="line mt-20 text-14 color-#030912 font-bold lh-22px">
      {{ info.projectName }}
    </div>
    <div class="line mb-18 text-12 color-#030912 lh-22px">
      ({{ info?.projectTypeName?.replaceAll(',', '；') }})
    </div>
    <div class="grid grid-cols-2 pb-16" style="border-bottom: 1px solid #e8eaed">
      <div class="flex-col gap-8">
        <div class="mark text-14 color-#686F7C font-400">提测节点</div>
        <div class="text-14 color-#030912">{{ $format(info?.insideTestNode) || '--' }}</div>
      </div>
      <div class="flex-col gap-8">
        <div class="text-14 color-#686F7C font-400">启动时间</div>
        <div class="text-14 color-#030912">{{ $format(info?.projectStartNode) || '--' }}</div>
      </div>
    </div>
    <div class="mt-16 flex flex-col gap-y-12">
      <MyLabel v-status="[0, 1, 2, 3]" icon="01" label="产品负责人">
        <MyInfo
          v-for="(item, index) in info.productHeaderList"
          :key="index"
          :src="item.avatar"
          :text="item.name"
        />
      </MyLabel>
      <MyLabel v-status="[0, 1, 2, 3]" icon="07" label="研发负责组">
        {{ info.developGroupName }}
        <MyInfo
          v-if="info.developmentHeader"
          :src="info.developmentHeader.avatar"
          :text="info.developmentHeader.name"
        />
      </MyLabel>
      <!-- <MyLabel v-status="[0, 1, 2, 3]" icon="02" label="研发成员">
        <MyInfo
          v-for="(item, index) in info.rdMembersList"
          :key="index"
          :src="item.avatar"
          :text="`${item.personName}(${item.executeName})`"
        />
      </MyLabel> -->
      <!-- <MyLabel v-status="[1]" icon="03" label="任务总工期" :value="`${info.taskDuration || 0}天`" /> -->
      <MyLabel
        v-status="[1]"
        icon="03"
        label="待处理任务总工期"
        :value="`${info.incompleteDuration || 0}天`"
      />
      <MyLabel
        v-status="[2]"
        icon="03"
        label="未完成任务总工期"
        :value="`${info.incompleteDuration || 0}天`"
      />
      <MyLabel
        v-status="[2]"
        icon="03"
        label="未完成任务人均工期"
        :value="`${info.incompleteDurationPerson || 0}天`"
      />
      <!-- <MyLabel v-status="[1]" icon="08" label="内部提测节点" :value="info.insideTestNode" />
      <MyLabel v-status="[1, 2]" icon="08" label="上线节点" :value="info.releaseTestNode" />
      <MyLabel v-status="[1]" icon="08" label="启动时间" :value="info.projectStartNode" /> -->
      <MyLabel
        v-status="[2]"
        icon="08"
        label="运维时间"
        :value="$format(info.projectMaintenanceNode)"
      />
      <MyLabel v-status="[3]" icon="08" label="验收节点" :value="$format(info.projectAcceptNode)" />
      <!-- <MyLabel v-status="[0, 1, 2, 3]" icon="10" label="项目类型">
        <div
          v-if="info.projectTypeName"
          class="h-20 bg-#F4F5F7 p-x-7 font-size-12 color-#3A3E45 font-bold lh-20"
        >
          {{ info?.projectTypeName?.replaceAll(',', '；') }}
        </div>
      </MyLabel> -->
      <MyLabel
        v-status="[0, 1, 2, 3]"
        icon="11"
        label="任务环节"
        :value="info?.taskStageName?.replaceAll(',', '>')"
      />
    </div>
    <div class="mt-28 flex justify-between">
      <n-avatar-group :options="avatarOptions" :size="30" :max="5">
        <template #avatar="{ option: { name, src } }">
          <n-tooltip>
            <template #trigger>
              <n-avatar :src="src" />
            </template>
            {{ name }}
          </n-tooltip>
        </template>
        <template #rest="{ rest }">
          <n-avatar>+{{ rest }}</n-avatar>
        </template>
      </n-avatar-group>
      <div class="h-28 w-106 flex items-center justify-center rounded-14 bg-#F4F5F7">
        <n-icon :size="16" :component="UploadFileOutlined" color="#0A56D8" class="mr-4"></n-icon>
        <div class="text-12 color-#030912">{{ dayjs(info.createTime).format('YYYY-MM-DD') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import dayjs from 'dayjs'
import { usePermissionStore } from '@/store'
import defaultUser from '@/assets/default-user.png'
import { UploadFileOutlined } from '@vicons/material'
import { MdMore } from '@vicons/ionicons4'
defineOptions({ name: 'ProjectCard' })
const router = useRouter()
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  levels: {
    type: Array,
    default: () => [],
  },
  canView: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['del'])
const { hasPermission } = usePermissionStore()
const levelColor = computed(() => {
  return props?.levels?.find((item) => item.code === props.info.projectLevel)?.color || ''
})
const statusMap = {
  TO_BE_STARTED: 0,
  IN_PROGRESS: 1,
  IN_MAINTENANCE: 2,
  ALREADY_END: 3,
}
const vStatus = {
  mounted(el, binding) {
    if (!binding.value.includes(statusMap[props.info.projectPhase])) {
      el.remove()
    }
  },
}
const avatarOptions = computed(() =>
  (props?.info?.rdMembersList || []).map(({ avatar = defaultUser, personName }) => ({
    name: personName,
    src: avatar,
  }))
)
</script>

<style lang="scss" scoped>
.project-card {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 24px;
  background: #ffffff;
  box-shadow: 0px 6px 6px 0px rgba(231, 234, 240, 0.4);
  border-radius: 12px;
  border: 1px solid #e7eaf0;
  .line {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }
  .mark {
    &::after {
      content: '内部';
      height: 14px;
      line-height: 14px;
      background: #e8effc;
      border-radius: 2px;
      padding: 0 4px;
      font-size: 10px;
      color: #0a56d8;
      margin-left: 4px;
    }
  }
}
</style>
